<template>
	<router-link
			tag="div"
			:to="{name: 'detail', params: { id: recommendItem.id}}"
			class="home-recommend-item"
	>
		<div class="home-recommend-item-image">
			<img :src="recommendItem.pic" :alt="recommendItem.name">
		</div>
		<div class="home-recommend-item-detail">
			<div
					class="home-recommend-item-detail-title"
					v-html="recommendItem.name"
			></div>
			<div :class="['home-recommend-item-detail-characteristic',{'characteristic-position':characteristic}]"
			     v-html="recommendItem.characteristic || recommendItem.name"
			></div>
			<div
					class="home-recommend-item-detail-price"
			>
				<span>{{recommendItem.minPrice | formatMoney}}</span>
				<span v-show="characteristic">已售{{recommendItem.numberSells}}</span>
			</div>
		</div>
	</router-link>
</template>

<script>
	export default {
		name: "RecommendItem",
		props: {
			recommendItem: {
				type: Object,
				required: true
			},
			characteristic: {
				type: Boolean,
				default: true
			}
		}
	}
</script>
